<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
</head>
<body class="vertical  light  ">
<div class="wrapper">
    <nav th:replace="~{comm/blank::topnav}"/>
    <aside th:replace="~{comm/blank::aside}"/>
    <main role="main" class="main-content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12">
                    <h2 class="h3 mb-3 page-title">损耗情况</h2>
                    <div th:replace="~{indent-sale::sale-detail}"/>
                    <div class="row mb-4 items-align-center">
                        <div class="col-md">
                            <ul class="nav nav-pills justify-content-start">
                                <li class="nav-item">
                                    <a class="nav-link text-muted px-2" href="/dashboard/indents">销售
                                        <span class="badge badge-pill bg-white border text-muted ml-2"
                                            ></span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted px-2" href="/dashboard/stock">库存
                                        <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link active bg-transparent pr-2 pl-0 text-primary add-loss" href="/dashboard/loss"  >损耗
                                        <span class="badge badge-pill bg-primary text-white ml-2"> </span></a>
                                </li>
                                <!--    <li class="nav-item">
                                        <a class="nav-link text-muted px-2" href="#">盈亏
                                            <span class="badge badge-pill bg-white border text-muted ml-2"> </span></a>
                                    </li>-->
                            </ul>
                        </div>
                        <div class="col-md-auto ml-auto text-right">
                  <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
<!--                    <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>-->
                    <span class="text-muted">损耗数 : <strong id="idtcount" th:text="${items.size()}">9999</strong></span>
                  </span>
                            <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
                    <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>
                      <span class="text-muted"><strong id="time-limit">2020-12-01 - 2020-12-31</strong></span>
                  </span>
                            <button type="button" class="btn" data-toggle="modal" data-target=".modal-slide"><span
                                    class="fe fe-filter fe-16 text-muted"></span></button>
                            <button type="button" class="btn"><span class="fe fe-refresh-ccw fe-16 text-muted"></span>
                            </button>
                        </div>
                    </div>
                    <!-- Slide Modal -->
                    <div class="modal fade modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="defaultModalLabel">过滤条件</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <i class="fe fe-x fe-12"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="p-2">
                                        <div class="form-row">
                                            <p class="mb-2"><strong>按商品名搜索</strong></p>
                                            <input id="item-name" type="text" class="form-control" placeholder="商品名">
                                        </div>
                                        <div class="form-group my-4">
                                            <p class="mb-2"><strong>分类</strong></p>
                                            <label for="multi-select2" class="sr-only"></label>
                                            <select class="form-control select2-multi" id="multi-select2">
                                                <optgroup label="可点击选择多个分类" class="type">
                                                    <!--                              <th:block th:if="${not (types==null) or types.isEmpty()}" th:each="type:${types}">-->
                                                    <th:block th:if="${types!=null}" th:each="type:${types.entrySet()}">
                                                        <option class="typeItem" th:value="${type.key}"
                                                                th:text="${type.value}"></option>
                                                    </th:block>
                                                    <!--                              <option value="AZ">Arizona</option>-->
                                                    <!--                              <option value="CO">Colorado</option>-->
                                                    <!--                              <option value="ID">Idaho</option>-->
                                                    <!--                              <option value="MT">Montana</option>-->
                                                    <!--                              <option value="NE">Nebraska</option>-->
                                                    <!--                              <option value="NM">New Mexico</option>-->
                                                    <!--                              <option value="ND">North Dakota</option>-->
                                                    <!--                              <option value="UT">Utah</option>-->
                                                    <!--                              <option value="WY">Wyoming</option>-->
                                                </optgroup>
                                            </select>
                                        </div> <!-- form-group -->

                                        <div class="form-row">
                                            <p class="mb-2"><strong>按最新更新时间过滤</strong></p>
                                        </div>

                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="startTime1">起始时间</label>
                                                <input class="form-control" id="startTime1" type="date" name="date"
                                                       value="2000-01-01">
                                            </div>
                                            <!--                          <div class="form-group col-md-6">-->
                                            <!--                            <label>起始时间</label>-->
                                            <!--                            <div class="input-group">-->
                                            <!--                              <div class="input-group-prepend">-->
                                            <!--                                <div class="input-group-text"><span class="fe fe-calendar fe-16"></span></div>-->
                                            <!--                              </div>-->
                                            <!--                              <input type="text" class="form-control drgpicker" id="startTime1" value="2020-12-01">-->
                                            <!--                            </div>-->
                                            <!--                          </div>-->
                                            <div class="form-group col-md-6">
                                                <label>起始时间</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text"><span
                                                                class="fe fe-clock fe-16"></span></div>
                                                    </div>
                                                    <input class="form-control" type="time" id="startTime2" name="time"
                                                           value="00:00">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="endTime1">截止时间</label>
                                                <input class="form-control" id="endTime1" type="date" name="date"
                                                       value="2222-12-30">
                                            </div>
                                            <!--                          <div class="form-group col-md-6">-->
                                            <!--                            <label>截止时间</label>-->
                                            <!--                            <div class="input-group">-->
                                            <!--                              <div class="input-group-prepend">-->
                                            <!--                                <div class="input-group-text" ><span class="fe fe-calendar fe-16"></span></div>-->
                                            <!--                              </div>-->
                                            <!--                              <input type="text" class="form-control drgpicker" id="endTime1" value="2020-12-31">-->
                                            <!--                            </div>-->
                                            <!--                          </div>-->
                                            <div class="form-group col-md-6">
                                                <label>截止时间</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text"><span
                                                                class="fe fe-clock fe-16"></span></div>
                                                    </div>
                                                    <input class="form-control" type="time" id="endTime2" name="time"
                                                           value="00:00">
                                                </div>
                                            </div>
                                        </div>

                                        <!--                      <div class="form-row">-->
                                        <!--                        <div class="form-group col-md-8">-->
                                        <!--                          <label for="client">顾客</label>-->
                                        <!--                          <select id="client" class="form-control select2 customer">-->
                                        <!--                            <option>顾客1</option>-->
                                        <!--                            <option>顾客2</option>-->
                                        <!--                          </select>-->
                                        <!--                        </div>-->
                                        <!--                      </div>-->

                                        <!--                        <div class="form-group my-4">-->
                                        <!--                          <p class="mb-2">-->
                                        <!--                            <strong>支付方式</strong>-->
                                        <!--                          </p>-->
                                        <!--&lt;!&ndash;                          <div class="custom-control custom-checkbox">&ndash;&gt;-->
                                        <!--&lt;!&ndash;                            <input type="checkbox" class="custom-control-input" id="customCheck1">&ndash;&gt;-->
                                        <!--&lt;!&ndash;                            <label class="custom-control-label" for="customCheck1">在线支付</label>&ndash;&gt;-->
                                        <!--&lt;!&ndash;                          </div>&ndash;&gt;-->
                                        <!--                          <div class="custom-control custom-checkbox">-->
                                        <!--                            <input type="checkbox" class="custom-control-input" id="customCheck2">-->
                                        <!--                            <label class="custom-control-label" for="customCheck2">现金支付</label>-->
                                        <!--                          </div>-->
                                        <!--                          <div class="custom-control custom-checkbox">-->
                                        <!--                            <input type="checkbox" class="custom-control-input" id="customCheck1" checked>-->
                                        <!--                            <label class="custom-control-label" for="customCheck1">在线支付</label>-->
                                        <!--                          </div>-->

                                        <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->
                                        <!--                        <div class="form-group my-4">-->
                                        <!--                          <p class="mb-2">-->
                                        <!--                            <strong>Types</strong>-->
                                        <!--                          </p>-->
                                        <!--                          <div class="custom-control custom-radio">-->
                                        <!--                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">-->
                                        <!--                            <label class="custom-control-label" for="customRadio1">End users</label>-->
                                        <!--                          </div>-->
                                        <!--                          <div class="custom-control custom-radio">-->
                                        <!--                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>-->
                                        <!--                            <label class="custom-control-label" for="customRadio2">Whole Sales</label>-->
                                        <!--                          </div>-->
                                        <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->

                                        <!--                        <div class="form-group my-4">-->
                                        <!--                          <p class="mb-2">-->
                                        <!--                            <strong>Completed</strong>-->
                                        <!--                          </p>-->
                                        <!--                          <div class="custom-control custom-switch">-->
                                        <!--                            <input type="checkbox" class="custom-control-input" id="customSwitch1">-->
                                        <!--                            <label class="custom-control-label" for="customSwitch1">Include</label>-->
                                        <!--                          </div>-->
                                        <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->
                                        <div class="form-group my-4">
                                            <p class="mb-2">
                                                <strong>降序</strong>
                                            </p>
                                            <div class="custom-control custom-radio">
                                                <input type="checkbox" id="sales-desc" class="custom-control-input">
                                                <label class="custom-control-label" for="sales-desc">销量降序</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="submit" class="btn mb-2 btn-primary btn-block">查询</button>
                                    <button type="button" class="btn mb-2 btn-secondary btn-block">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table datatables sales-table" id="dataTable-1">
                        <!--                                        <div class="dataTables_filter">
                                                                    <select text="过滤" style="width: fit-content;float:right;">
                                                                        <option value ="1">分类</option>
                                                                        <option value ="2">名称</option>
                                                                        <option value="3">订单ID</option>
                                                                        <option value="4">商品ID</option>
                                                                    </select>
                                                                </div>-->
                        <thead>
                        <tr>
                            <th></th>
                            <th>商品ID</th>
                            <th>商品名</th>
                            <th>库存</th>
                            <th>分类</th>
                            <th>状态</th>
                            <th>最后更新时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <th:block th:if="${items!=null}" th:each="item:${items}" >
                            <tr>
                                <td>
                                    <div class="custom-control custom-checkbox">
                                        <input name="sel" type="checkbox" class="custom-control-input"
                                               th:id="${item.id}">
                                        <label class="custom-control-label" th:for="${item.id}"></label>
                                    </div>
                                </td>
                                <td th:text="${item.id}"></td>
                                <td th:text="${item.name}"></td>
                                <td th:text="${item.inventory}"></td>
                                <td th:text="${types.get(item.type)}"></td>
                                <td th:text="${item.status==1?'正常':(item.status==0?'下架':'损耗')}"></td>
                                <td th:text="${#temporals.format(item.updatedTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                            </tr>
                        </th:block>
                        </tbody>
                    </table>
               <!--     <table class="table border table-hover bg-white" id="sales-table">
                        <thead>
                        <tr role="row">
                            <th>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="all">
                                    <label class="custom-control-label" for="all"></label>
                                </div>
                            </th>
                            <th><strong>销售商品</strong></th>
                            <th><strong>所属分类</strong></th>
                            <th><strong>销售数量</strong></th>
                            <th><strong>售价</strong></th>
                            <th><strong>订单ID</strong></th>
                            <th><strong>用户ID</strong></th>
                            <th><strong>创建时间</strong></th>
                            <th><strong>更新时间</strong></th>
                            <th><strong>更多</strong></th>
                        </tr>
                        </thead>
                        <tbody>
                        <th:block th:if="${indentItems!=null}" th:each="indent:${indentItems}">
                            <tr>
                                <td class="align-center">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input">
                                        <label class="custom-control-label"></label>
                                    </div>
                                </td>
                                <td th:text="${indent.itemName}"></td>
                                <td th:text="${types.get(indent.itemType)}"></td>
                                <td th:text="${indent.count}"></td>
                                <td th:text="${indent.priceSell}"></td>
                                <td th:text="${indent.indentId}"></td>
                                <td th:text="${indent.userId}"></td>
                                <td th:text="${#temporals.format(indent.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td th:text="${#temporals.format(indent.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                &lt;!&ndash;                    <td><span class="dot dot-lg bg-success mr-2"></span></td>&ndash;&gt;
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm dropdown-toggle more-vertical" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="text-muted sr-only">Action</span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Remove</a>
                                            <a class="dropdown-item" href="#">Assign</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </th:block>
                        </tbody>
                    </table>-->
               <!--     <nav aria-label="Table Paging" class="my-3" id="foot-page">
                        <th:block th:if="${page != null}">
                            <input type="hidden" th:value="${page.current}" id="curPage">
                            <ul class="pagination justify-content-end mb-0">
                                <li class="page-item">
                                    <a class="page-link" th:if="${page.current > 1}" th:href="@{'?pageNum='+${page.current -1}}">上一页</a>
                                </li>
                                &lt;!&ndash;                  <li class="page-item"><a class="page-link" href="#">1</a></li>&ndash;&gt;
                                &lt;!&ndash;                  <li class="page-item active"><a class="page-link" href="#">2</a></li>&ndash;&gt;
                                &lt;!&ndash;                  <li class="page-item"><a class="page-link" href="#">3</a></li>&ndash;&gt;
                                <li class="page-item">
                                    <a class="page-link" th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{'?pageNum='+${page.current +1}}">
                                        下一页</a></li>
                            </ul>
                        </th:block>
                    </nav>-->
                </div>
            </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
        <div th:replace="~{item-pick::cartModal}"/>
    </main> <!-- main -->
</div> <!-- .wrapper -->
<script th:src="@{/dash/js/jquery.min.js}"></script>
<script th:src="@{/dash/js/popper.min.js}"></script>
<script th:src="@{/dash/js/moment.min.js}"></script>
<script th:src="@{/dash/js/bootstrap.min.js}"></script>
<script th:src="@{/dash/js/simplebar.min.js}"></script>
<script th:src='@{/dash/js/daterangepicker.js}'></script>
<script th:src='@{/dash/js/jquery.stickOnScroll.js}'></script>
<script th:src="@{/dash/js/tinycolor-min.js}"></script>
<script th:src="@{/dash/js/config.js}"></script>
<script th:src="@{/dash/js/d3.min.js}"></script>
<script th:src="@{/dash/js/topojson.min.js}"></script>
<script th:src="@{/dash/js/datamaps.all.min.js}"></script>
<script th:src="@{/dash/js/datamaps-zoomto.js}"></script>
<script th:src="@{/dash/js/datamaps.custom.js}"></script>
<script th:src="@{/dash/js/Chart.min.js}"></script>
<script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
<script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
<script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
<script th:src="@{/dash/js/gauge.min.js}"></script>
<script th:src="@{/dash/js/jquery.sparkline.min.js}"></script>
<script th:src="@{/dash/js/apexcharts.min.js}"></script>
<script th:src="@{/dash/js/apexcharts.custom.js}"></script>
<script th:src='@{/dash/js/jquery.mask.min.js}'></script>
<script th:src='@{/dash/js/select2.min.js}'></script>
<script th:src='@{/dash/js/jquery.steps.min.js}'></script>
<script th:src='@{/dash/js/jquery.validate.min.js}'></script>
<script th:src='@{/dash/js/jquery.timepicker.js}'></script>
<script th:src='@{/dash/js/dropzone.min.js}'></script>
<script th:src='@{/dash/js/uppy.min.js}'></script>
<script th:src='@{/dash/js/quill.min.js}'></script>
<script th:src="@{/js/handle/cart.js}"></script>
<script th:src="@{/js/handle/init-price.js}"></script>
<script>
    $(function(){
        //init
        const types = $('.type').find(".typeItem")
        const arr = []
        let idx = 0;
        while (idx < types.length) {
            let tmp = types[idx++]
            let typeTmp = {"id":"", "name":""}
            // console.log(tmp)
            typeTmp["id"]=tmp.value
            typeTmp["name"]=tmp.innerText
            // console.log(typeTmp)
            arr.push(typeTmp)
            // console.log(tmp.innerText)
        }
        console.log(arr)

        $('#submit').click(function () {

            console.log($('#curPage').val())
            console.log($('#startTime1').val()+' '+$('#startTime2').val())
            console.log($('#endTime1').val()+' '+$('#endTime2').val())
            //×用复制的 不是x
            let text = $('.selection').find('.select2-selection__choice').text().split('×')
            text.splice(0,1)
            console.log(text)
            let res = []
            for (let i = 0;i < text.length;i++){
                for (const a in arr) {
                    if (arr[a].name==text[i]){
                        //只要id
                        res.push(arr[a].id)
                        break
                    }
                }
            }
            res=res.map(Number)
            console.log(res)
            // const curPage = $('#curPage').val()
            const start = $('#startTime1').val() + ' ' + $('#startTime2').val()+':00'
            const end = $('#endTime1').val() + ' ' + $('#endTime2').val()+':00'
            const typeIdList = res
            const name = $('#item-name').val()
            // const desc = $('#sales-desc').prop("checked")
            // console.log(desc)
            console.log('ready..')
            // const url = '/dashboard/indents?pageNum='+curPage+'&start='+start+'&end='+end+'&typeList='+typeIdList
            const url = '/dashboard/loss'
            const obj = {
                // "pageNum": curPage,
                "typeIdList": typeIdList,
                "start": start,
                "end": end,
                "name": name,
                // "salesDesc": desc
            }
            console.log(obj)
            console.log(url)
            $.ajax({
                url: url,
                type:"get",
                data: obj,
                contentType:"application/json;charset=utf-8",
                success:function(data){
                    console.log(data)
                    const newContent = $(data).find(".sales-table")
                    console.log(newContent)
                    $(".sales-table").replaceWith(newContent)
                    // $('#foot-page').replaceWith($(data).find("#foot-page"))
                    $('#idtcount').replaceWith($(data).find("#idtcount"))
                }
            })
            $('#time-limit').text(start+' - '+end)
        })
    });

</script>
<script>
    $('.select2').select2(
        {
            theme: 'bootstrap4',
        });
    $('.select2-multi').select2(
        {
            multiple: true,
            theme: 'bootstrap4',
        });
    $('.drgpicker').daterangepicker(
        {
            singleDatePicker: true,
            timePicker: false,
            showDropdowns: true,
            locale:
                {
                    format: 'YYYY-MM-DD'
                }
        });
    $('.time-input').timepicker(
        {
            'scrollDefault': 'now',
            'zindex': '9999' /* fix modal open */
        });
    /** date range picker */
    if ($('.datetimes').length)
    {
        $('.datetimes').daterangepicker(
            {
                timePicker: true,
                startDate: moment().startOf('hour'),
                endDate: moment().startOf('hour').add(32, 'hour'),
                locale:
                    {
                        format: 'M/DD hh:mm A'
                    }
            });
    }
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end)
    {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    $('#reportrange').daterangepicker(
        {
            startDate: start,
            endDate: end,
            ranges:
                {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
        }, cb);
    cb(start, end);
    $('.input-placeholder').mask("00/00/0000",
        {
            placeholder: "__/__/____"
        });
    $('.input-zip').mask('00000-000',
        {
            placeholder: "____-___"
        });
    $('.input-money').mask("#.##0,00",
        {
            reverse: true
        });
    $('.input-phoneus').mask('(000) 000-0000');
    $('.input-mixed').mask('AAA 000-S0S');
    $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
        {
            translation:
                {
                    'Z':
                        {
                            pattern: /[0-9]/,
                            optional: true
                        }
                },
            placeholder: "___.___.___.___"
        });
    // editor
    var editor = document.getElementById('editor');
    if (editor)
    {
        var toolbarOptions = [
            [
                {
                    'font': []
                }],
            [
                {
                    'header': [1, 2, 3, 4, 5, 6, false]
                }],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [
                {
                    'header': 1
                },
                {
                    'header': 2
                }],
            [
                {
                    'list': 'ordered'
                },
                {
                    'list': 'bullet'
                }],
            [
                {
                    'script': 'sub'
                },
                {
                    'script': 'super'
                }],
            [
                {
                    'indent': '-1'
                },
                {
                    'indent': '+1'
                }], // outdent/indent
            [
                {
                    'direction': 'rtl'
                }], // text direction
            [
                {
                    'color': []
                },
                {
                    'background': []
                }], // dropdown with defaults from theme
            [
                {
                    'align': []
                }],
            ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
            {
                modules:
                    {
                        toolbar: toolbarOptions
                    },
                theme: 'snow'
            });
    }
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function()
    {
        'use strict';
        window.addEventListener('load', function()
        {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form)
            {
                form.addEventListener('submit', function(event)
                {
                    if (form.checkValidity() === false)
                    {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
<script>
    var uptarg = document.getElementById('drag-drop-area');
    if (uptarg)
    {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
            {
                inline: true,
                target: uptarg,
                proudlyDisplayPoweredByUppy: false,
                theme: 'dark',
                width: 770,
                height: 210,
                plugins: ['Webcam']
            }).use(Uppy.Tus,
            {
                endpoint: 'https://master.tus.io/files/'
            });
        uppy.on('complete', (result) =>
        {
            console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
    }
</script>
<script th:src="@{/dash/js/apps.js}"></script>
<script>
    $('#dataTable-1').DataTable(
        {
            autoWidth: true,
            "lengthMenu": [
                [16, 32, 64, -1],
                [16, 32, 64, "All"]
            ]
        });
</script>
</body>
</html>
